<template>
<div class="text" v-bind:class="{box:isBox,border:isBorder}">
    <div v-bind:class="{inner:isInner}">springsummer</div>
    <div v-bind:class="classObject">autumnwinter</div>
    <div v-bind:class="classMeal">chichi</div>

</div>
</template>

<script>
import {
    ref,
    reactive,
    computed
} from 'vue'

const isBox = ref(true)
const isBorder = ref(true)
const isInner = ref(true)
const isMeal = ref(true)

const classObject = reactive({ // 动态绑定class
    inner: true
})
const classMeal = computed(() => {
    meal: isMeal.value
})
</script>

<style>
.text {

    text-align: center;
    line-height: 30px;
}

.box {
    width: 100%;
    /* height: 100px; */
    background-color: blue;

}

.border {
    border: 1px dotted black;
}

.inner {
    width: 50px;
    height: 50px;
    border: 2px double yellow;
}

.meal {
    width: 50px;
    height: 50px;
    border: 2px dashed green;
}
</style>
